<template>
	<view>
		<navbar :scrollTop="scrollY" :isLove="isLove" @collect="toCollect"></navbar>
		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
				:style="'height:' + height + 'px;'" @scroll="scroll" @scrolltolower="lower">
				<!-- 轮播 -->
				<VerticalDanmu :messages="message">
					<productBg :images="images" :videos="videos" :code="dataList.id"
						:updateTime="dataList.updateTime" :autoplay="true"></productBg>
				</VerticalDanmu>

				<!-- 标题 区域 -->
				<view class="product-info mb-24">
					<!-- 标题 -->
					<view class="acea-row row-middle row-between title-box">
						<view class="title line2">
							<!-- <view class="red-tag">好铺优选</view> -->
							<view class="title-text line2">{{ dataList.title }}</view>
						</view>
						<view class="acea-row row-middle row-between share-btns">
							<button open-type="share">
								<image src="../static/images/wechat_icon.png" mode=""></image>
								<view style="font-size: 23rpx;">微信</view>

							</button>
							<button @click="toReport">
								<image src="../static/images/report_icon.png" mode=""></image>
								<view style="font-size: 23rpx;">举报</view>
							</button>
						</view>
					</view>
					<view class="service-price">
						<text>{{ dataList.price }}</text>元
					</view>
					<!-- 浏览、咨询统计 -->
					<!-- 浏览、咨询统计 -->
					<view class="acea-row row-middle row-between visit-box border-b">
						<view class="visit-advtar">
							<image :src="m.avatar" mode=""
								v-for="(m,ind) in dataList.managementResponse?dataList.managementResponse:[]" :key="ind"
								:style="{left: (20 * ind) + 'rpx'}"></image>
						</view>
						<view class="acea-row row-middle row-between visit-l">
							<view class="visit-num" @click="toVisitor">{{dataList.view?dataList.view:0}}人浏览</view>
							<view class="visit-num">{{dataList.communication?dataList.communication:0}}人咨询</view>
						</view>
					</view>

					<!-- 地址 -->
					<view class="acea-row row-top row-between address">
						<view class="address-l line2">服务地址：{{ dataList.area }}</view>
						<view class="acea-row row-middle distance" @click="toLocation">

							<image src="../static/images/red_location.png" mode=""></image>
							<view>{{kmUnit(dataList.distance)}}</view>
							<view class="acea-row row-between" style="margin-left: 10rpx"><text
									style="line-height: 9px;">导航</text><u-icon name="arrow-right" size="12px"></u-icon>
							</view>
						</view>
					</view>
				</view>

				<!-- 服务详情 -->
				<view class="module-box white-bg mb-24">
					<view class="module-title">服务详情</view>
					<view class="acea-row row-middle row-between pd-t-b-24">
						<view class="label">商家名称</view>
						<view class="text">{{ dataList.name || '无' }}</view>
					</view>
					<view class="acea-row row-middle row-between pd-t-b-24">
						<view class="label">服务类别</view>
						<view class="text">{{ dataList.typeName || '无' }}</view>
					</view>
					<view class="acea-row row-middle row-between pd-t-b-24">
						<view class="label">服务特色</view>
						<view class="text">{{ dataList.characteristic || '无' }}</view>
					</view>
					<view class="acea-row row-middle row-between pd-t-b-24 border-b">
						<view class="label">服务区域</view>
						<view class="text">{{ dataList.area || '无' }}</view>
					</view>

					<view class="supplement pd-t-b-24">
						<view class="label">补充说明</view>
						<view class="text pd-t-b-24">
							{{ dataList.particulars || '无' }}
						</view>
					</view>
				</view>

				<!-- 联系人 -->
				<!-- <view class="module-box white-bg mb-24">
					<contacts-list :list="dataList.contacts"></contacts-list>
				</view> -->

				<view class="module-box white-bg mb-24">
					<contacts-list :list="dataList.contacts" @toPhone="toPhone" :info="dataform"></contacts-list>
				</view>
				<!-- 推荐 -->
				<view class="goods">
					<view class="acea-row row-between goods-top">
						<view class="acea-row row-middle tabs">
							<view :class="['tab',goodsTabOn==index?'tab-on':'']" v-for="(item,index) in goodsTab"
								:key="index" @click="changeRecommed(index)">{{item}}</view>
						</view>
						<!-- <view class="shop-btn">
							金币商城
						</view>	 -->
					</view>
					<recommend :notType="false" :list="nearbyList"></recommend>
				</view>
				<view class='loadingicon acea-row row-center row-middle'>
					<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
				</view>

				<view class="uni-p-b-98"></view>
			</scroll-view>
		</view>
		<report :link-id="dataList.id" :types="types" ref="report" />
		<detail-footer :contact="dataList" @toPhone="toPhone" @toCollect="toCollect" :info="dataList"></detail-footer>
	</view>
</template>

<script>
	import navbar from '../components/navbar/navbar.vue'
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import recommend from '../components/inforecommend/inforecommend.vue'
	import productBg from '../components/productBg/productBg.vue'
	import report from "@/pages/details/components/goods_report/report.vue"
	import {
		getService
	} from '@/api/api.js'
	import VerticalDanmu from '@/pages/details/components/VerticalDanmu/index.vue'
	import {
		addCollect,
		delCollect,
		existsCollect
	} from '@/api/api.js'
	import {
		radarChartData,
		radarChartOpts
	} from '../static/echarts.js'

	import {
		getMerchantDetailApi
	} from '@/api/api.js'

	import {
		NearbyMerchantApi
	} from '@/api/service.js'

	let app = getApp();
	export default {
		components: {
			navbar,
			detailFooter,
			contactsList,
			recommend,
			report,
			productBg,
			VerticalDanmu,
		},
		data() {
			return {
				scrollY: 0,
				scrollTop: 0,
				isLove: false,
				height: 0,
				opacity: 0,
				goodsTabOn: 0,
				goodsTab: ['为你推荐', '附近推荐'],
				goodsList: [1, 2],
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 8],
				dataList: {},
				images: [],
				message: [],
				videos: [],
				nearList: [], //附近推荐
				nearPage: 1,
				nearTotalPage: 1,

				loading: true,
				bhv: [],
				loadTitle: '我也是有底线的',
				id: 0,
				nearbyList: [],
				shareInfo: {
					title: "",
					infoId: "",
					shareId: "",
					infoType: 3,
					isInitStatus: 0
				},
				detailInfo: {
					type: '',
					st: '',
					storeCategory: ''
				},
			};
		},
		onLoad(options) {
			if (!options.id) return uni.navigateBack()
			this.id = options.id;
			this.getData(options.id);
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
				}
			});
			// if (this.goodsTabOn != 1) return
			this.getNearList()
		},
		methods: {
			toPhone() {
				if (this.bhv.length < 1 || this.bhv.indexOf(2) == -1) {
					this.bhv.push(2)
				}
				console.log(this.bhv)
			},
			toCollect() {
				if (this.bhv.length < 1 || this.bhv.indexOf(3) == -1) {
					this.bhv.push(3)
				}

			},
			toVisitor() {
				this.dataList.vistype = 3
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=" + this.mind + "&data=" + JSON.stringify(
						this.dataList)
				})
			},
			scroll: function(e) {
				var that = this,
					scrollY = e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
				that.$set(that, 'scrollY', scrollY);
			},
			toPages(path) {
				uni.navigateTo({
					url: path
				})
			},
			toReport() {
				this.$refs.report.open();
			},
			toLocation() {
				console.log(this.dataList)
				let that = this;
				uni.openLocation({
					latitude: parseFloat(that.dataList.latitude),
					longitude: parseFloat(that.dataList.longitude),
					success: function() {
						console.log('success');
						if (that.bhv.length < 1 || that.bhv.indexOf(1) == -1) {
							that.bhv.push(1)
						}
					}
				});
			},
			kmUnit(m) {
				var v;
				m = Number(m)
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m.toFixed(2) + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			toReawrdDetail(list) {
				uni.navigateTo({
					url: '/pages/details/offeraRreward/offeraRreward?taskId=' + list.id + '&fbInfo=' + JSON
						.stringify(list)
				})
			},
			async getData(id) {
				// uni.showLoading({
				// 	title:'加载中'
				// })
				try {
					let {
						data
					} = await getMerchantDetailApi(id, this.$location);
					data.image = data.image ? data.image : this.$noImageShow;
					data.image = data.image.split(',');
					data.image.map(img => {
						let len = img.length;
						let type = img.substring(len - 3, len);
						img = img.replace('/h', 'h');
						type: type == 'png' || type == 'jpg' ? this.images.push(img) : this.videos.push(img)
					});
					data.distance = Number(data.distance).toFixed(2)
					this.dataList = data;
					// console.log('this.dataList', this.dataList)
					this.existsIsLove(this.dataList.id);
					// uni.hideLoading()
					if (this.dataList.managementResponse) {
						this.dataList.managementResponse.forEach(item => {
							this.message.push({
								content: (item.nickname ? item.nickname : '匿名') + '查看了店铺',
								avatar: item.avatar
							})
						})
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			//切换推荐栏
			changeRecommed(index) {
				this.goodsTabOn = index;
				this.loading = false;
				this.nearPage = 1;

				this.getNearList()
			},
			//附近推荐
			async getNearList() {
				console.log('fujin....')
				console.log()
				if (this.nearPage == 1) {
					this.nearbyList = []
				}

				let parmas = {
					limit: 4,
					page: this.nearPage,
					city: this.$city
				}
				if (this.goodsTabOn == 1) {
					parmas = {
						...parmas,
						...this.$location
					}
				}
				try {
					let {
						data
					} = await getService(parmas);
					let d = [...this.nearbyList, ...data.list];
					this.nearbyList = d.filter(item => item.id != this.curId && item.id != this.id)
					console.log('jigweidu=', data)
					this.totalNearPage = data.totalPage;
					this.loading = true;
					if (this.nearPage == data.totalPage && this.nearbyList.length > 0) this.loadTitle = '我也是有底线的'
					else if (this.nearPage < data.totalPage && this.nearbyList.length > 0) this.loadTitle = '加载更多'
					else this.loadTitle = '暂无数据'
				} catch (e) {
					//TODO handle the exception
				}
			},
			//触底
			lower() {
				if (this.goodsTabOn != 1 || this.nearTotalPage <= this.nearPage) return
				this.loading = false
				this.nearPage += 1;
				this.getNearList()
			},
			toCollect(status) {
				// this.isLove = status;
				// console.log('status',status)
				let that = this;
				let d = {
					status,
					type: 3,
					id: that.dataList.id
				}
				if (status) {
					d.title = that.dataList.title
				}
				getApp().globalData.toCollect(d, (res) => {
					that.existsIsLove(res.id);
				})

				if (this.bhv.indexOf(3) == -1) {
					this.bhv.push(3)
				}

			},
			existsIsLove(id) {
				let that = this;
				getApp().globalData.existsIsLove({
					id,
					type: 3
				}).then(res => {
					console.log('appExistsLove', res)
					that.isLove = res;
				})
			}
		},
		onReachBottom() {
			this.nearPage++;
			this.getNearList()
		}
	}
</script>

<style lang="scss">
	@import "../static/css/index.scss";
</style>